<template>
  <div
      class="all-classify-popup z-50 absolute yu-bgColor-one-only flex flex-col  mt-2"
      :class="[store.isFlag ? 'w-140' : '-left-10 w-60 h-120 overflow-y-auto']"
      @click.stop="noAllClassifyPopupFn">
    <div class="m-2">
      <YuButton>
        全部风格
      </YuButton>
    </div>
    <ul>
      <li v-for="(list, index) in catlist.categories" :key="'yu' + index" class="flex pt-2 pb-2 ">
        <div class="ml-3 border-r-1 flex items-center">
          <span class="i-ic-baseline-panorama-photosphere-select"/>
          <span class="w-10 text-center mr-1">{{ list.title }}</span>
        </div>
        <div class="ml-2">
            <span v-for="s in list.sub" :key="s.name" class="inline-block mr-2 yu-textColor-hover cursor-pointer h-8"
                  @click="clickClassify(s)">
              {{ s.name }}
            </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import YuButton from '@/components/YuButton/index.vue'
import {useStore} from "@/store/index"

const store = useStore()
// 接收父组件传递数据
defineProps({
  catlist: {}
})
// 打开分类弹窗
const $emit = defineEmits(['noAllClassifyPopupFn', 'getClassifyData'])
// 不关闭选择分类弹窗
const noAllClassifyPopupFn = () => {
  $emit('noAllClassifyPopupFn', true)
}
// 获取当前单击分类的数据
const clickClassify = (info) => {
  $emit('getClassifyData', info)
  // 当点击每一个歌单类型的时候，需要关闭弹窗，
  $emit('noAllClassifyPopupFn', false)
}
</script>

<style scoped>

</style>
